<template>
  <div>
    <SearchForm @search="getTableData" @reset="resetSearchForm">
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('登录账号')">
          <el-input v-model="page.accountNumber" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('IP')">
          <el-input v-model="page.ip" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('操作时间')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              unlink-panels
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <Table :page="page" :table-data="tableData"
             :loading="loading"
             max-height="600px"
             :table-column="tableColumn" @handleCurrentChange="handleCurrentChange"
             @handleSizeChange="handleSizeChange">
      </Table>
    </el-card>
  </div>
</template>

<script>
import {loginLogList} from "@/api/system";
import {dateFormatSection} from "@/utils/tools";

export default {
  name: "LoginLog",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tenantList: [],
      tableData: [],
      tableColumn: [
        {label: this.$t('登录账号'), prop: 'accountNumber', minWidth: 150},
        {label: 'IP', prop: 'ip', minWidth: 100},
        {label: this.$t('操作时间'), prop: 'creationTime', minWidth: 150},
      ],
      loading: false
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const [datetimeStart, datetimeEnd] = dateFormatSection(this.page.timeValue)
      const params = {
        datetimeStart, datetimeEnd,
        ...this.page
      }
      delete params.timeValue
      this.loading = true
      const res = await loginLogList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page = {
          ...this.page,
          total: total
        }
        this.loading = false
      } else {
        this.loading = false
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    resetSearchForm() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
